<!--
 * @Author: delin66
 * @Date: 2025-01-02 15:54:06
 * @LastEditors: delin66
 * @LastEditTime: 2025-04-12 14:40:20
 * @Descripttion: 
-->
<template>
  <div class="container">
    <el-menu
      :default-active="activeIndex"
      class="nav"
      mode="vertical"
      background-color="#194E87"
      text-color="#e6f7ff"
      active-text-color="#ffffff"
      @select="handleSelect"
    >
      <template v-for="(item, index) in navList">
        <el-menu-item
          :key="index"
          v-if="item.children?.length === 0"
          :index="item.path"
          style="font-size: 16px; font-weight: bold"
          :class="item.path == activeIndex ? 'active' : '' ">
          {{item.title }}
        </el-menu-item>
        <el-sub-menu :key="index" v-if="item.children?.length > 0" :index="item.path">
          <template #title><span style="font-size: 16px; font-weight: bold">{{ item.title }}</span></template>
          <el-menu-item
            v-for="subItem in item.children"
            :key="item.path + subItem.path"
            :index="item.path + subItem.path"
            style="font-size: 16px; font-weight: bold"
            :class="(item.path + subItem.path) == activeIndex ? 'active' : '' "
            >{{ subItem.title }}</el-menu-item
          >
        </el-sub-menu>
      </template>
    </el-menu>

    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const activeIndex = ref<string>(
  '/personal-center/graduation-or-exit/graduation'
);

const navList = ref([
  // {
  //   title: '企业毕业',
  //   path: '/personal-center/graduation-or-exit/graduation',
  //   children: [],
  // },
  {
    title: '企业退出',
    path: '/personal-center/graduation-or-exit',
    children: [
      { title: '大学科技园退租审批表', path: '/kjy-exit' },
      { title: '众创空间退出申请表', path: '/zhongchuang-exit' },
      { title: '退出申请列表', path: '/my-exit' },
    ],
  },
  

]);

const handleSelect = (key: string, keyPath: string[]) => {
  router.push(key);
};

// 控制nav是否显示

const curPath = computed(() => {
  return route.path;
});
watch(
  curPath,
  () => {
    // 正确显示当前显示的nav
    activeIndex.value = route.path;
  },
  {
    immediate: true,
  }
);
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  display: flex;
}

.active {
  background-color: #003B7A !important;
}

.nav {
  width: 25%;
  //background-color: #545c64;
  //.el-menu-item.is-active {
  //  border-left: 4px solid #ffd04b;
  //}
}
</style>
